<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div>第一栏</div>
      <draggable :list="draggableList"
                 :group="{ name: draggableGroupName, pull: 'clone', put: false }"
                 :clone="cloneDraggable" >

        <i class="el-icon-copy-document">嵌套</i>

      </draggable>
      <br>
      <draggable :list="ComponentsList"
                 :clone="cloneComponent"
                 :group="{ name: draggableGroupName, pull: 'clone', put: false }"
      >
        <transition-group>

          <div
            v-for="comp in ComponentsList"
            :key="comp.id"
            v-if="comp.component">
            <component v-bind:is="comp.component.name"/>
          </div>
        </transition-group>
      </draggable>
    </el-col>

    <el-col :span="36">
      <nested-draggable-component :nested-list="nestedFormList" :group-name="draggableGroupName"/>
    </el-col>

    <el-col :span="6">
      <div>第三栏</div>
    </el-col>

  </el-row>
</template>

<script>
import NestedDraggableComponent from "@/components/NestedDraggableComponent";
import {uuid} from 'vue-uuid'
import {ComponentName, ComponentsList} from '@/formDesignComponentLibrary/componentsList'
import draggable from "vuedraggable";


export default {
  name: "FormDesigner",
  components: {
    NestedDraggableComponent, draggable,
    [ComponentName.divInput]: () => import('@/components/formComponents/formInput'),
    [ComponentName.divInputNumber]: () => import('@/components/formComponents/formInputNumber')
  },

  data() {
    return {
      draggableGroupName: "draggableGroup",
      ComponentsList,
      nestedFormList: [
        {
          id: uuid.v4(),
          name: "新建表单",
          tasks: []
        }
      ],
      draggableList: [{}]

    }
  },
  methods: {
    cloneComponent(comp) {
      return {
        id: uuid.v4(),
        name: comp.name,
        component: comp.component,
        tasks: []
      }
    },

    cloneDraggable(){
      return {
        id: uuid.v4(),
        name: "嵌套",
        height:200,
        tasks: []
      }
    }
  }
}
</script>

<style scoped>

</style>
